<template>
    <el-card>
        <el-tabs v-model="activeName" @tab-click="changeTab">
            <el-tab-pane label="车辆通知查询" name="operationList">
                <el-form ref="CustomerForm" :inline="true" :model="CustomerForm" class="tpl-form-inline pb0">
                    <el-form-item label="车辆类型">
                        <el-select v-model="CustomerForm.carStatus" placeholder="全部">
                            <el-option label="预警车辆" value="预警车辆"></el-option>
                            <el-option label="避灾车辆" value="避灾车辆"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="天气类型">
                        <el-select v-model="CustomerForm.weatherType" placeholder="全部">
                            <el-option label="暴雨" value="暴雨"></el-option>
                            <el-option label="暴雪" value="暴雪"></el-option>
                            <el-option label="积水" value="积水"></el-option>
                            <el-option label="冰雹" value="冰雹"></el-option>
                            <el-option label="台风" value="台风"></el-option>
                            <el-option label="结冰" value="结冰"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="区域">
                        <el-select v-model="CustomerForm.region" placeholder="全部">
                        </el-select>
                    </el-form-item>
                    <el-form-item label="汽车车型">
                        <el-select v-model="CustomerForm.carType" placeholder="全部">
                            <el-option label="卡罗拉" value="卡罗拉"></el-option>
                            <el-option label="凯美瑞" value="凯美瑞"></el-option>
                            <el-option label="汉兰达" value="汉兰达"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="通知类型">
                        <el-select v-model="CustomerForm.pushType" placeholder="全部">
                            <el-option label="app" value="app"></el-option>
                            <el-option label="短信" value="短信"></el-option>
                            <el-option label="电话" value="电话"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-date-picker v-model="CustomerForm.date" type="daterange" range-separator="~" format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions"
                            start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                    </el-form-item>
                </el-form>
                <div class="mt10 mb20">
                    <el-button type="primary" icon="el-icon-search" @click="queryList" :disabled="loading">查询</el-button>
                    <el-button @click="reset" icon="el-icon-refresh" :disabled="loading">重置</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="exportFile" >导出</el-button>
                </div>
                <el-table class="sd" stripe border :data="tableData" v-loading="loading">
                    <el-table-column align="center" prop="index" label="序号" width="100px"></el-table-column>
                    <el-table-column align="center" prop="carType" label="车辆型号"></el-table-column>
                    <el-table-column align="center" prop="vCode" label="车辆VIN码"></el-table-column>
                    <el-table-column align="center" prop="weatherType" label="受灾类型"></el-table-column>
                    <el-table-column align="center" prop="pushType" label="通知/推送类型"></el-table-column>
                    <el-table-column align="center" prop="date" label="通知时间"></el-table-column>
                    <el-table-column align="center" prop="pushStatus" label="通知状态"></el-table-column>
                    <el-table-column align="center" prop="isOpen" label="是否访问"></el-table-column>
                    <el-table-column align="center" prop="region" label="所在区域"></el-table-column>
                </el-table>
                <el-pagination class="tpl-mg-t mt20 fr"
                               small
                               @size-change="pageSizeChange"
                               @current-change="pageCurrentChange"
                               :current-page="queryForm.pageNum"
                               :page-sizes="[10, 20, 30, 40, 50, 100]"
                               :page-size="queryForm.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total"
                                style="margin-bottom: 5px">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="车辆通知统计" name="operationDate">
                <el-form ref="CustomerForm2" :inline="true" :model="CustomerForm2" class="tpl-form-inline pb0">
                    <el-form-item label="天气类型">
                        <el-select v-model="CustomerForm2.weatherType" placeholder="全部">
                            <el-option label="暴雨" value="暴雨"></el-option>
                            <el-option label="暴雪" value="暴雪"></el-option>
                            <el-option label="积水" value="积水"></el-option>
                            <el-option label="冰雹" value="冰雹"></el-option>
                            <el-option label="台风" value="台风"></el-option>
                            <el-option label="结冰" value="结冰"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="区域">
                        <el-select v-model="CustomerForm2.region" placeholder="全部">
                        </el-select>
                    </el-form-item>
                    <el-form-item label="汽车车型">
                        <el-select v-model="CustomerForm2.carType" placeholder="全部">
                            <el-option label="卡罗拉" value="卡罗拉"></el-option>
                            <el-option label="凯美瑞" value="凯美瑞"></el-option>
                            <el-option label="汉兰达" value="汉兰达"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-date-picker v-model="CustomerForm2.date" type="daterange" range-separator="~" format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions2"
                            start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                    </el-form-item>
                </el-form>
                <div class="mt10 mb20">
                    <el-button type="primary" icon="el-icon-search" @click="queryList2" :disabled="loading">查询</el-button>
                    <el-button @click="reset" icon="el-icon-refresh" :disabled="loading">重置</el-button>
                </div>
                <el-table class="sd" stripe border :data="tableData2" v-loading="loading">
                    <el-table-column align="center" prop="date" label="预警时间"></el-table-column>
                    <el-table-column align="center" prop="weatherType" label="受灾类型"></el-table-column>
                    <el-table-column align="center" prop="region" label="所在区域"></el-table-column>
                    <el-table-column align="center" prop="carType" label="车型"></el-table-column>
                    <el-table-column align="center" prop="pushNums" label="推送通知数量"></el-table-column>
                    <el-table-column align="center" prop="readNums" label="阅读数量"></el-table-column>
                    <el-table-column align="center" prop="readC" label="阅读比例"></el-table-column>
                    <el-table-column align="center" prop="realReadNums" label="有效阅读量"></el-table-column>
                    <el-table-column align="center" prop="realReadC" label="有效阅读比例"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="tpl-mg-t mt20 fr"
                               small
                               @size-change="pageSizeChange"
                               @current-change="pageCurrentChange"
                               :current-page="queryForm.pageNum"
                               :page-sizes="[10, 20, 30, 40, 50, 100]"
                               :page-size="queryForm.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total2"
                                style="margin-bottom: 5px">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<script>
    export default {
        name: 'messageInfo',
        data () {
            return {
                // tab页标签
                activeName: 'operationList',
                // 列表查询条件
                queryForm: {
                    pageNum: 1,
                    pageSize: 10
                },
                 // 查询表单
                CustomerForm: {
                    carStatus: '预警车辆',
                    weatherType: '',
                    region: '',
                    carType: '',
                    pushType: '',
                    date: ''
                },
                CustomerForm2: {
                    weatherType: '',
                    region: '',
                    carType: '',
                    date: '',
                },
                // total: 0,
                tableData: [],
                newData: [],
                tableData2: [],
                newData2: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick (picker) {
                            const start = new Date()
                            picker.$emit('pick', [start, start])
                        }
                    },{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                pickerOptions2: {
                    shortcuts: [{
                        text: '今天',
                        onClick (picker) {
                            const start = new Date()
                            picker.$emit('pick', [start, start])
                        }
                    },{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                userData: {},
                loading: false
            }
        },
        created () {
            this.getList();
        },
        computed: {
            total() {
                return this.tableData.length;
            },
            total2() {
                return this.tableData2.length;
            }
        },
        methods: {
            handleEdit (i,r) {
                this.$routerTo('messageDetail');
            },
            queryList () {
                this.params = { ...this.CustomerForm }
                delete this.params.date
                for (let key in this.params) {
                    if (!this.params[key] || this.params[key] === '' || this.params[key].length === 0) {
                        delete this.params[key]
                    }
                }
                if (this.CustomerForm.date && this.CustomerForm.date.length === 2) {
                    this.params.dateStart = new Date(new Date(new Date(this.CustomerForm.date[0]).setHours(0)).setMinutes(0)).setSeconds(0)
                    this.params.dateEnd = new Date(new Date(new Date(this.CustomerForm.date[1]).setHours(0)).setMinutes(0)).setSeconds(0) + 24 * 3600 * 1000
                }
                this.tableData = this.$filters(this.params, this.newData);
            },
            queryList2 () {
                this.params = { ...this.CustomerForm2 }
                delete this.params.date
                for (let key in this.params) {
                    if (!this.params[key] || this.params[key] === '' || this.params[key].length === 0) {
                        delete this.params[key]
                    }
                }
                if (this.CustomerForm2.date && this.CustomerForm2.date.length === 2) {
                    this.params.dateStart = new Date(new Date(new Date(this.CustomerForm2.date[0]).setHours(0)).setMinutes(0)).setSeconds(0)
                    this.params.dateEnd = new Date(new Date(new Date(this.CustomerForm2.date[1]).setHours(0)).setMinutes(0)).setSeconds(0) + 24 * 3600 * 1000
                }
                this.tableData2 = this.$filters(this.params, this.newData2);
            },
            // 查询列表
            getList () {
                let cData = [], cData2 = [];
                    cData = [
                        {"index": "1","carType": "卡罗拉","vCode": "LVSHJCAL8FE384344","weatherType": "暴雨","pushType": "短信","date": "2020-5-1 09:00","pushStatus": "发送成功","isOpen": "是","region": "浙江省杭州市上城区湖滨街道","carStatus": "预警车辆"},
                        {"index": "2","carType": "凯美瑞","vCode": "LVSHJCAL8FE384344","weatherType": "积水","pushType": "短信","date": "2020-5-1 09:00","pushStatus": "发送失败","isOpen": "是","region": "上海市黄浦区南京东路","carStatus": "预警车辆"},
                        {"index": "3","carType": "汉兰达","vCode": "LVSHJCAL8FE384344","weatherType": "暴雪","pushType": "短信","date": "2020-5-1 09:00","pushStatus": "发送成功","isOpen": "否","region": "广东省惠州市惠城区桥东街道","carStatus": "预警车辆"},
                        {"index": "4","carType": "卡罗拉","vCode": "LVSHJCAL8FE384344","weatherType": "冰雹","pushType": "短信","date": "2020-5-1 09:00","pushStatus": "发送失败","isOpen": "否","region": "广东广州市越秀区人民路","carStatus": "避灾车辆"},
                    ];
                    cData2 = [
                        {"date": "1","date": "2020.5.14-2020.5.20","weatherType": "全部","region": "全部","carType": "全部","pushNums": "100","readNums": "50","readC": "50%","realReadNums": "25","realReadC": "50%","carStatus": "预警车辆"}
                    ];
                this.tableData = cData;
                this.newData = cData;
                this.tableData2 = cData2;
            },
            getList2 () {
                let cData = [], cData2 = [];
                    cData = [
                        {"index": "1","carType": "卡罗拉","vCode": "LVSHJCAL8FE384344","weatherType": "暴雨","pushType": "短信","date": "2020-5-1 09:00","pushStatus": "发送成功","isOpen": "是","region": "浙江省杭州市上城区湖滨街道","carStatus": "预警车辆"},
                        {"index": "2","carType": "凯美瑞","vCode": "LVSHJCAL8FE384344","weatherType": "积水","pushType": "短信","date": "2020-5-1 09:00","pushStatus": "发送失败","isOpen": "是","region": "上海市黄浦区南京东路","carStatus": "预警车辆"},
                        {"index": "3","carType": "汉兰达","vCode": "LVSHJCAL8FE384344","weatherType": "暴雪","pushType": "短信","date": "2020-5-1 09:00","pushStatus": "发送成功","isOpen": "否","region": "广东省惠州市惠城区桥东街道","carStatus": "预警车辆"},
                        {"index": "4","carType": "卡罗拉","vCode": "LVSHJCAL8FE384344","weatherType": "冰雹","pushType": "短信","date": "2020-5-1 09:00","pushStatus": "发送失败","isOpen": "否","region": "广东广州市越秀区人民路","carStatus": "避灾车辆"},
                    ];
                    cData2 = [
                        {"date": "1","date": "2020.5.14-2020.5.20","weatherType": "全部","region": "全部","carType": "全部","pushNums": "100","readNums": "50","readC": "50%","realReadNums": "25","realReadC": "50%","carStatus": "预警车辆"}
                    ];
                this.tableData = cData;
                this.newData2 = cData;
                this.tableData2 = cData2;
            },
            // tab页转换
            changeTab (tab) {
                if (tab.name === 'operationDate') {
                    // this.$refs.schedule.getActivitySchedule()
                } else {
                    // this.getBaseDataList()
                }
            },
            reset () {
               this.CustomerForm = {
                    carStatus: '',
                    weatherType: '',
                    region: '',
                    carType: '',
                    pushType: '',
                    date: ''
                }
                this.$nextTick(() => {
                    this.getList()
                })
            },
            reset2 () {
                this.CustomerForm = {
                    weatherType: '',
                    region: '',
                    carType: '',
                    date: ''
                }
                this.$nextTick(() => {
                    this.getList2()
                })
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.queryForm.pageSize = val
                if (this.queryForm.pageNum > pages) {
                    this.queryForm.pageNum = 1
                }
                this.getList()
                this.getList2()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.queryForm.pageNum = val
                this.getList()
            },
            exportFile () {
                this.$message({ type: 'success', message: `导出成功!` })
                
            }
        }
    }
</script>

<style scoped>

</style>
